<template>
  <div>
    <div class="w-[1200px] bg-white shadow-xl border-[2px] px-3 py-3 pb-8">
      <div>
        <div class="font-bold mr-4 text-[20px] line-clamp-3" :title="info.title">
          {{ info.title }}
        </div>
        <div class="flex items-center gap-2 mt-2">
          <div class="bg-[#ebf7e5] px-1 text-[14px] text-[#889482]">
            {{ wtypeStatus[info.wtype] }}
          </div>
          <div class="bg-[#fddfa5] px-1 text-[14px] text-[#fab122]">
            {{ typeStatus[info.type] }}
          </div>
        </div>
      </div>
      <div class="flex justify-between">
        <div class="w-[59%] box">
          <div class="title">
            正文内容
            <a
              :href="info.url"
              target="_blank"
              class="ml-4 text-[#55abf3] border-b border-[#55abf3] cursor-pointer"
              >跳转原文</a
            >
          </div>
          <div class="mt-2 text-sm overflow-auto bg-[#f3f4f6] h-[200px]">
            {{ info.content }}
          </div>

          <div class="flex gap-2 my-4" v-if="info.imgs">
            <el-image
              class="w-[60px] h-[60px] border-[#55abf3]"
              :style="{ borderWidth: itemIndex === imgIndex ? '2px' : 0 }"
              :src="itemImg.imgUrl"
              v-for="(itemImg, itemIndex) in info.showImgs"
              :key="itemIndex"
              fit="scale-down"
              @click="changeTab(itemIndex)"
            />
            <div class="relative w-[60px] h-[60px]">
              <el-image
                class="w-[60px] h-[60px]"
                v-if="info.imgs.length > 7"
                :src="info.imgs[7].imgUrl"
                fit="scale-down"
              />
              <div v-if="info.imgs.length > 7" class="img6">+{{ info.imgs.length - 7 }}</div>
            </div>
          </div>
          <el-carousel
            v-if="info.imgs"
            :show-indicators="false"
            ref="carousel"
            :autoplay="false"
            height="200px"
            style="background-color: #f8f8f8"
            @setActiveItem="setActiveItem"
          >
            <el-carousel-item v-for="(item, index) in info.imgs" :key="index">
              <el-image
                :src="item.imgUrl"
                :z-index="9999999"
                style="cursor: pointer"
                hide-on-click-modal	
                :preview-src-list="info.imgs.map((i: any) => i.imgUrl)"
                :initial-index="index"
                fit="cover"
                preview-teleported
              />
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="w-[39%]">
          <div class="title">基本信息</div>
          <div class="bg-[#f8f8f8] px-2 py-2 text-[14px] flex flex-wrap justify-between mt-2">
            <div class="flex items-center w-[45%] mb-6">
              <div class="w-[60px] text-[#91969a]">来源</div>
              <div class="text-[#000]">微信公众号</div>
            </div>
            <div class="flex items-center w-[45%] mb-6">
              <div class="w-[60px] text-[#91969a]">发布时间</div>
              <div class="text-[#000]">
                {{ dayjs(info.publishTime).format('YYYY-MM-DD HH:mm:ss') }}
              </div>
            </div>
            <div class="flex items-center w-[45%] mb-6">
              <div class="w-[60px] text-[#91969a]">作者</div>
              <div class="text-[#000]">{{ info.author }}</div>
            </div>
            <div class="flex items-center w-[45%] mb-6">
              <div class="w-[60px] text-[#91969a] whitespace-nowrap">用户ID</div>
              <div class="text-[#000] whitespace-nowrap">{{ info.authorId }}</div>
            </div>
            <div class="flex items-center w-[45%] mb-6">
              <div class="w-[60px] text-[#91969a]">发布网站</div>
              <div class="text-[#000]">{{ info.webName }}</div>
            </div>
            <div class="flex items-center w-[45%] flex-wrap mb-6">
              <div class="w-[60px] text-[#91969a]">精准地域</div>
              <div class="text-[#000]">{{ info.province }}</div>
            </div>
            <div class="flex flex-wrap items-center w-[45%]">
              <div class="w-[60px] text-[#91969a]">发布地址</div>
              <div class="text-[#000]">{{ info.publishLocation || '---' }}</div>
            </div>
          </div>
          <div class="title">关键词命中</div>
          <div class="px-2 py-2 bg-[#f8f8f8] flex flex-wrap mt-2 gap-2">
            <el-button v-for="(item, index) in info.frequency" :key="index" type="primary"
              >{{ item.name }}({{ item.count }})</el-button
            >
          </div>
          <div class="title">信息判断</div>
          <div class="flex justify-between mt-3 text-[16px]">
            <div>
              情感判断：
              <el-select v-model="formData.attitudeMerge" placeholder="" style="width: 80px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div>
              事件分类：
              <el-cascader
                v-model="formData.categories"
                class="w-[180px]"
                :show-all-levels="false"
                :options="classifiedOpinionData"
                clearable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </div>
          </div>
          <div class="text-[16px] my-2">OCR识别：</div>
          <el-input v-model="formData.ocrData" placeholder="" type="textarea" clearable></el-input>
          <div class="mt-2 flex justify-between px-16">
            <el-button type="primary" @click="tsFn">推送</el-button>
            <el-button type="warning" @click="btsFn">不推送</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { classifiedOpinionData } from '@/stores/commonData'
import { dayjs, ElMessage } from 'element-plus'
import { wtypeStatus, typeStatus } from '@/stores/commonData'
import { notWarningOne, warningOne } from '@/api/home'
import _ from 'lodash'
const { info } = defineProps<{
  info: any
}>()

const emits = defineEmits<{
  (e: 'pushFn'): void
}>()
onMounted(async () => {})
const formData = ref({
  openIds: '',
  id: info.id,
  attitudeMerge: info.attitudeMerge,
  categories: [],
  ocrData: info.ocrData
})
const options = [
  {
    value: '-1',
    label: '负面'
  },
  {
    value: '0',
    label: '中性'
  },
  {
    value: '1',
    label: '正面'
  }
]
const carousel = ref()
const imgIndex = ref()
const changeTab = (index: any) => {
  if (imgIndex.value === index) {
    return
  }
  imgIndex.value = index
  setActiveItem(index)
}
const setActiveItem = (index: any) => {
  carousel.value.setActiveItem(index)
}
const tsFn = _.debounce(async () => {
  if (formData.value.categories.length <= 0) {
    return ElMessage.error('请选择事件分类')
  }
  if (formData.value.categories.length > 1) {
    formData.value.categories = formData.value.categories[1]
  } else {
    formData.value.categories = formData.value.categories[0] || null
  }
  console.log(formData.value)
  await warningOne(formData.value)
  emits('pushFn')
  ElMessage.success('操作成功')
}, 500)
const btsFn = _.debounce(async () => {
  await notWarningOne({ id: info.id })
  emits('pushFn')
  ElMessage.success('操作成功')
}, 500)
</script>
<style lang="less" scoped>
.title {
  padding-left: 12px;
  position: relative;
  font-size: 16px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
  margin-top: 10px;
  &::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 5px;
    height: 20px;
    background: #5087ec;
  }
}
.img6 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #00000033;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
.box {
  :deep(.el-carousel__indicators) {
    display: none !important;
  }
}
</style>
